<template>
  <div class="login">
    <div class="warp">
      <div class="title">
        您好，<br/>
        请登录账户
      </div>
      <div class="form-item no-m">
        <input placeholder="账号/邮箱/手机号" class="input" />
      </div>
      <div class="form-item no-m">
        <input placeholder="密码" class="input" />
      </div>
      <div class="form-item checkbox">
        <van-checkbox-group shape="square">
          <van-checkbox name="a"><span class="link">记住登录状态</span></van-checkbox>
        </van-checkbox-group>
        <a href="" class="link">忘记密码?</a>
      </div>
      <div class="form-item"><ButtonView size="lg" :block="true">登 录</ButtonView></div>
      <div class="form-item zh"><a href="" class="link">注册账号</a></div>
    </div>
  </div>
</template>

<script setup>
import ButtonView from '@/components/ButtonView'
</script>

<style scoped lang="scss">
.login{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .warp{
    width: calc(100% - dpi(16rem));
    > .title{
      margin-bottom: dpi(13rem);
      font-family: PingFangSC-Semibold;
      font-size: dpi(6rem);
      line-height: dpi(8rem);
      color: #05204d;
    }

    .form-item{
      display: flex;
      align-items: center;
      &:not(&.no-m){
        margin-bottom: dpi(7rem);
      }
      &:last-child{
        margin-bottom: 0 !important;
      }
      &.checkbox{
        justify-content: space-between;
        margin-top: dpi(6rem);
        margin-bottom: dpi(14rem);
        
      }
      &.zh{
        align-items: center;
        justify-content: center;
      }
      .input{
        width: 100%;
        height: dpi(14rem);
        border: none;
        outline: none;
        background: transparent;
        border-bottom: 1px solid #ccc;
        font-family: PingFangSC-Regular;
        font-size: dpi(3rem);
        color: rgb(5, 32, 77);
        &::placeholder{
          opacity: rgba(5, 32, 77, 0.5);
        }
        
      }
    }
  }
}

.link{
  font-family: PingFangSC-Regular;
  font-size: dpi(3rem);
  color: #0571b0;
}
</style>